<template>
	<!-- 单料评吸 -->
	<view class="com_view">
		<view class="icon_box" @click="helpShow=true">
			<image src="@/static/icons/help.png" mode=""></image>
		</view>
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<!--  -->
					<view class="header_cell" v-for="header in tableHeader" :key="header.title" 
					:style="`--childer-num:${header.num}`" 
					:class="`${header.class} ${header.bg} ${!header.require&&header.num ===1? 'no_require':''}`">
						<text>{{ header.title }}</text>
						<view class="header_childers">
							<view class="header_childer" v-for="child in header.childer" :key="child.title"
							:class="`${!child.require? 'no_require':''}`">
								<text> {{ child.title }} </text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				<view class="table_content">

					<view class="table_row" v-for="row in tableData" :key="row.id">
						<view class="table_cell" v-for="item in tableKey" :key="item.title"
						:class="[`${item.class}`, `${( !row.meetingUnblendedCorrelationRep[item.key] && isSubmit && item.require && item.type!=='text')? 'no_fill':''}`]">
							<!-- <text v-if="item.type==='text'">{{ row[item.key] }}</text> -->
							
							<!-- class="custom-header-line-1" @click="$showFill(row[item.key], item.isHeader)" -->
							
							<!-- 纯文本展示 -->
							<view  v-if="item.type === 'text'">
								<text>{{ row[item.key] }}</text>
							</view>
							
							<!-- 总计 -->
							<text v-else-if="item.type==='total'">{{ row.meetingUnblendedCorrelationRep[item.key] }}</text>
							
							<!-- 文本输入框 -->
							<u-input border="surround" type="text"
							inputAlign="center" fontSize="16px" v-else-if="item.type=='input'" :disabled="already"
							  @blur="inputBlur(row.meetingUnblendedCorrelationRep, item, $event)" 
							    v-model="row.meetingUnblendedCorrelationRep[item.key]" ></u-input>
							
							<!-- 数字输入框  填写状态和展示状态 -->
							<view class="input_cell" v-else @click="inputCellEv(row, item)">
								
								<text v-if="(row.id+item.key)!==clickId" class="text-show" @click.stop="">
									{{ $ReserveOne(row.meetingUnblendedCorrelationRep[item.key]) }}
								</text>
								<u-input border="surround" inputAlign="center" fontSize="16px"
								 type="number" @blur="inputBlur(row.meetingUnblendedCorrelationRep, item, $event)" :disabled="already"
								v-model="row.meetingUnblendedCorrelationRep[item.key]" ></u-input>
							</view>
							
							
							<!-- <u-input border="surround" :type="item.type=='input'? 'text':'number'"
							inputAlign="center" fontSize="16px" v-else :disabled="already"
							  @blur="inputBlur(row.meetingUnblendedCorrelationRep, item, $event)" 
							    v-model="row.meetingUnblendedCorrelationRep[item.key]" ></u-input> -->
								
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		
		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" 
			@click="submit" :disabled="already"></u-button>
		</view>
		
		<u-modal :show="tipShow" title="提示" :content='tipText'
		width="300px" 
		@confirm="tipClose" @close="tipClose"></u-modal>
		
		
		<u-modal :show="helpShow" title="单料评吸"
		width="400px" 
		@confirm="helpShow=false" @close="helpShow=false">
			<view class="help_box">
				<view class="help_line">
					1、<text>香型、突出特点、用途以及备注为非必填项，总计为自动计算项其余均为必填项。</text>
				</view>
				<view class="help_line">
					2、<text>香气质、香气量、浓度、柔细度、余味、杂气、刺激性均为数值，且步长为0.5，范围为0~9。</text>
				</view>
			</view>
		</u-modal>
		
		
		<!-- 提交前的提示 -->
		<u-modal :show="submitShow" title="提交确认" width="300px"
		 content="数据提交后将无法进行修改，您确定要提交吗？"
		:showCancelButton="true" @cancel="submitShow=false" @confirm="submitConfirm" @close="submitClose"
		></u-modal>
		
	</view>
	
</template>

<script>
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingUnblended,
		meetingUnblendedCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	
	const Header = [
		{ title: '编号', childer: [], num: 1, class: 'no_class', bg: 'no_bg',
			require: true,
		},
		{ title: '年份、产地、等级', childer: [], num: 1, class: 'year_class', bg: 'name_bg', require: true },
		{ title: '香气指标', childer: [ { title: '香型' },{ title: '香气质', require: true },{ title: '香气量', require: true } ], num: 3  },
		{ title: '烟气指标', childer: [{ title: '浓度',require: true },{ title: '柔细度',require: true },{ title: '余味',require: true }], num: 3  },
		{ title: '控制指标', childer: [{ title: '杂气',require: true },{ title: '刺激性',require: true },{ title: '劲头',require: true }], num: 3  },
		{ title: '燃烧性', childer: [], num: 1,require: true  },
		{ title: '灰色', childer: [], num: 1,require: true  },
		{ title: '总计', childer: [], num: 1,require: true },
		// { title: '均值', childer: [], num: 1,require: true  },
		{ title: '突出特点', childer: [], num: 1, class: 'w_plus'  },
		{ title: '用途', childer: [], num: 1, class: 'w_plus'  },
		{ title: '备注', childer: [], num: 1, class: 'w_plus'  },
	]
	
	const HeaderDict = [
		{ title:'编号', key:'number', isHeader: true, type: 'text', class: 'no_class'},
		{ title:'年份、产地、等级', key:'smokeName',isHeader: true, type: 'text', class: 'year_class'},
		{ title:'香型', key:'aromaFlavor', type: 'input'},
		{ title:'香气质', key:'aromaQuality', type: 'number', require: true},
		{ title:'香气量', key:'aromaVolume', type: 'number', require: true},
		{ title:'浓度', key:'density', type: 'number', require: true},
		{ title:'柔细度', key:'fineness', type: 'number', require: true},
		{ title:'余味', key:'aftertaste', type: 'number', require: true},
		{ title:'杂气', key:'impure', type: 'number', require: true},
		{ title:'刺激性', key:'thrill', type: 'number', require: true},
		{ title:'劲头', key:'energy', type: 'input', require: true},
		{ title:'燃烧性', key:'combustibility', type: 'input', require: true},
		{ title:'灰色', key:'soot', type: 'input', require: true},
		{ title:'总计', key:'total', type: 'total', require: true},
		// { title:'均值', key:'total', type: 'total', require: true},
		{ title:'突出特点', key:'characteristic', type: 'input', class: 'w_plus'},
		{ title:'用途', key:'purpose', type: 'input', class: 'w_plus'},
		{ title:'备注', key:'remarks', type: 'input', class: 'w_plus'},
	]
	
	// 校验规则
	const ruleDict = {
		aromaQuality:{ title:'香气质', len: 0.5, area: [0, 9] },
		aromaVolume:{ title:'香气量', len: 0.5, area: [0, 9] },
		density:{ title:'浓度', len: 0.5, area: [0, 9] },
		fineness:{ title:'柔细度', len: 0.5, area: [0, 9] },
		aftertaste:{ title:'余味', len: 0.5, area: [0, 9] },
		impure:{ title:'杂气', len: 0.5, area: [0, 9] },
		thrill:{ title:'刺激性', len: 0.5, area: [0, 9] }
	}
	
	export default{
		name: 'SingleCom',
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: { //是否已经提交过了
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				tableData: [],
				tipText: "",
				tipShow: false,
				isSubmit: false, //是否点击过提交
				helpShow: false, //帮助提示
				submitShow: false, //提交前的提醒
				timer2: null, //循环获取填写的数据
				live: true, //表明页面还存活着
				clickId:"", //设置点击的位置
			}
		},
		watch:{
			already(nv, ov) {
				if(nv) {
					if(this.timer2) {
						clearTimeout(this.timer2)
					}
					this.repeatGetData()
				}
			}
		},
		computed: {
			// 表头的上级
			tableHeader() { return Header },
			// 表头的字典项
			tableKey() { return  HeaderDict },
		},
		mounted() {
			if(this.already) {
				if(this.timer2) {
					clearTimeout(this.timer2)
				}
				this.repeatGetData()
			} else {
				this.getData()
			}
		},
		beforeDestroy() {
			if(this.timer2) {
				clearTimeout(this.timer2)
			}
		},
		methods: {
			
			// 循环获取数据
			async repeatGetData() {
				this.timer2 = setTimeout(()=>{
					this.repeatGetData()
				}, 1000 * 5)
				const res = await getMeetingUnblended({allId: this.id, loading: false})
				if(res.code != 200) return;
				this.tableData = res.data||[]
			},
			
			async getData() {
				this.tableData = [];
				const res = await getMeetingUnblended({allId: this.id})
				console.log("singleCom", res)
				if(res.code != 200) return;
				this.tableData = res.data||[]
			},
			// 设置点击位置
			inputCellEv(row, header) {
				if( this.already ) return ;
				this.clickId = row.id+header.key
			},
			// 失焦修改单个
			async inputBlur(form, header, e) {
				
				// 重置点击位置
				this.clickId = ""
				
				// form[header.key] = e
				this.$set(form, header.key, e)
				if(!this.ruleFn(form, header)) {
					form[header.key] = ""
					return
				}
				// form.total = this.getTotal(form)
				this.$set(form, 'total', this.getTotal(form))
				
				const res = await meetingUnblendedCorrelation({...form, loading: false})
				console.log("修改的结果为", res)
			},
			// 校验函数
			ruleFn(form, header) {
				const key = header.key
				if(!ruleDict[key]) { //不需要校验
					return true
				}
				const value = form[key]||0
				const rule = ruleDict[key]
				const len = (rule.len||0.1) * 10
				if(value <= rule.area[0] || value > rule.area[1] ) {
					this.tipText = `${header.title}的取值范围为${rule.area[0]}~${rule.area[1]},步长为${rule.len}`
					this.tipShow = true
					return false
				}
				if(value * 10 % len != 0) {
					this.tipText = `${header.title}的取值范围为${rule.area[0]}~${rule.area[1]},步长为${rule.len}`
					this.tipShow = true
					return false
				}
				
				return true
			},
			
			// 计算总值
			getTotal(form) {
				const arr = [
					{ key:'aromaQuality', title:'香气质', weight:2.4 },
					{ key:'aromaVolume', title:'香气量', weight:2.4 },
					{ key:'density', title:'浓度', weight:1.6 },
					{ key:'aftertaste', title:'余味', weight:1.6 },
					{ key:'fineness', title:'柔细度', weight:1 },
					{ key:'impure', title:'杂气', weight:1 },
					{ key:'thrill', title:'刺激性', weight:1 },
				]
				let total = 0
				arr.forEach(ele=>{
					let value = (form[ele.key]||0) * ele.weight
					if(value != 'Nane') {
						total += value
					}
				})
				console.log("total" , total)
				return total.toFixed(1)
			},
			
			
			submitClose() {
				this.submitShow = false
			},
			
			async submitConfirm() {
				this.$emit('c_submit', '单料评吸');
				const res = await request.put('/ipad/meetingUnblendedCorrelation/submit/' + this.id, {
					allId: this.id
				})
				this.isSubmit = false
				console.log("修改的结果为", res)
				this.submitShow = false
			},
			
			async submit() {
				// 查询填写是否完整
				let isFull = true
				this.isSubmit = true
				try{
					this.tableData.forEach(item => {
						HeaderDict.forEach(ele=>{
							if(ele.require&&!item.meetingUnblendedCorrelationRep[ele.key]) {
								isFull = false
								throw new Error(`${ele.title}未填写！`)
							}
						})
					})
				}catch(e){
					//TODO handle the exception
					console.log(e.message)
					return false
				}
				
				if(!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})
								
					return false
				}
				
				this.submitShow = true
				
				
				
			},
			tipClose() {
				this.tipShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		// flex: 1;
		height: 500px;
		padding: 20px;
		padding-top: 0;
		position: relative;
		--def-cell-width: 100px;
		--def-table-bg: rgb(245, 247, 250);
		--def-border-color: #ddd;
	}
	
	.icon_box {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 9;
		transform: translate(-70%, -120%);
		image {
			--hlep-icon-size: 26px;
			width: var(--hlep-icon-size);
			height: var(--hlep-icon-size);
		}
	}
	
	.help_box {
	
		.help_line {
			display: flex;
			line-height: 24px;
		}
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	
	
	
	.scroll_box {
		width: 100%;
		// height: 100%;
		height: calc(100% - 50px);
		position: relative;
		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				width: 100px;
				position: sticky;
				z-index: 5;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.year_class {
				width: 240px;
				position: sticky;
				z-index: 5;
				left: 100px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
			.name_bg {
				background-image: url(@/static/Maskgroup.png);
				background-position: -30px 0px;
			}
			.w_plus {
				width: 250px;
			}
			.no_require {
				color: #999;
			}
			.no_fill {
				background-color: rgba(200, 16, 46, 0.5);
			}
		}
	}
	.table_header {
		display: flex;
		align-items: center;
		width: max-content;
		background-image: url(@/static/Maskgroup.png);
		position: sticky;
		top: 0;
		z-index: 9;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);
		.header_cell {
			flex-shrink: 0;
			height: 100px;
			line-height: 50px;
			width: calc(var(--childer-num) * var(--def-cell-width));
			border-right: 1px solid var(--def-border-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.header_childers {
			display: flex;
			align-items: center;
			border-top: 1px solid var(--def-border-color);
			.header_childer {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--def-cell-width);
				border-right: 1px solid var(--def-border-color);
			}
		}
	}
	

	
	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		position: relative;
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--def-border-color);
			border-left: 1px solid var(--def-border-color);
		}
		.table_cell {
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid var(--def-border-color);
			position: relative;
			.input_cell {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.text-show {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					background-color: var(--def-table-bg);
					
				}
			}
		}
	}
</style>